<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>填写订单页-穿越火线周边商城</title>
  <link rel="Shortcut Icon" href="../images/10001.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../css/reuse.css" />
  <link rel="stylesheet" href="../css/orders.css">
  <script src="../js/axios0.27.2.js"></script>
  <script src="../js/request.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      position: relative;
    }

    li {
      list-style: none;
      cursor: pointer;
    }

    .wrap {
      position: fixed;
      width: 800px;
      height: 620px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 20px auto;
      border: 2px solid #eee;
      border-radius: 20px;
      background-color: white;
      /* display: none; */
    }

    .wrap h3 {
      text-align: center;
      height: 50px;
      line-height: 50px;
    }

    .content {
      width: 800px;
      height: 520px;
      display: flex;
      border-bottom: 1px solid #eee;
    }

    .nav {
      width: 50px;
      height: 100%;
      border-right: 1px solid #eee;
      overflow: auto;
    }

    .nav li {
      text-align: center;
      margin: 0.5px auto;
    }

    .city {
      flex: 1;
      width: 100%;
      overflow: auto;
      background-color: white;
      text-indent: 20px;
    }

    .city h4 {
      background-color: #eee;
    }

    .city ul {
      width: 100%;
      height: auto;
      overflow: hidden;
    }

    .city li {
      float: left;
      width: 33%;
      margin: 5px auto;
    }

    button {
      width: 40px;
      height: 25px;
      margin-top: 15px;
    }

    .sure {
      margin-left: 330px;
    }

    .cancel {
      float: right;
      margin-right: 330px;
    }

    .active {
      color: white;
      background-color: rgb(40, 149, 222);
    }

    .bg {
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.3);
      display: none;
      z-index: 100;
    }
  </style>
</head>

<body>
  <!-- 城市地址弹出框 -->
  <div class="bg">
    <div class="wrap">
      <h3>选择城市</h3>
      <div class="content">
        <div class="nav">
          <ul>
            <li></li>
          </ul>
        </div>
        <div class="city">
          <section>
            <h4></h4>
            <ul>
              <li></li>
            </ul>
          </section>
        </div>
      </div>
      <button class="sure">确定</button><button class="cancel">取消</button>
    </div>
  </div>
  <!-- logo -->
  <div class="wrap1">
    <header>
      <div class="logo">
        <a class="logo-cf" href="https://mall.qq.com/cf/" title="穿越火线商城官网" target="_blank">穿越火线周边商城官网</a>
        <a href="https://mall.qq.com/" class="logo-comm2" target="_blank">聚诚品</a>
      </div>
      <a href="./cart.html" class="cartbox" target="_blank">
        <i class="i-cart"></i>
        <span>购物车</span>
      </a>
      <div class="loginbar">
        <!-- 登录前 S-->
        <div class="unlogin" id="unlogin" style="display: block">
          <a href="./login.html" id="btn_header_login" title="立即登录">
            <i class="i-person"></i>&nbsp;立即登录</a>
        </div>
        <!-- 登录前 E-->
        <!-- 登录后 S-->
        <div class="loginbox clearfix" id="logined" style="display: none; height: 40px">
          <div class="login-info">
            <div class="fl hdimg">
              <img src="https://thirdqq.qlogo.cn/g?b=sdk&amp;k=6BvuawnH0BrfrKVChlgdzQ&amp;s=100&amp;t=1639407370"
                width="38" height="38" alt="头像" />
            </div>
            <p class="fl hdname">走走看看</p>
          </div>
          <div class="top-hover">
            <div class="arrow"></div>
            <div class="link-list">
              <a href="/myorder.shtml?busid=cf" title="订单管理" target="_blank">
                <i class="fl ico-comm i-order"></i>
                <span>订单管理</span>
              </a>
              <a href="/address.shtml" title="地址管理" target="_blank">
                <i class="fl ico-comm i-addr"></i>
                <span>地址管理</span>
              </a>
              <a href="/coupon.shtml?busid=cf" title="优惠卡券" target="_blank">
                <i class="fl ico-comm i-quan"></i>
                <span>优惠卡券</span>
              </a>
              <a href="/collect.shtml?busid=cf" title="我的收藏" target="_blank">
                <i class="fl ico-comm i-collect"></i>
                <span>我的收藏</span>
              </a>
              <a href="/sub.shtml?busid=cf" title="订阅管理" target="_blank">
                <i class="fl ico-comm i-subs"></i>
                <span>订阅管理</span>
              </a>
              <a href="/receive.shtml?busid=cf" title="领取中心" target="_blank">
                <i class="fl ico-comm i-lqcen"></i>
                <span>领取中心</span>
              </a>
              <a href="javascript:;" class="quit-link" title="退出登录" id="btn_header_logout">
                <i class="fl ico-comm i-quit"></i>
                <span>退出登录</span>
              </a>
            </div>
          </div>
        </div>
        <!-- 登录后 E-->
      </div>
      <div class="fr sosobox clearfix" id="blk_header_search">
        <a href="javascript:;" class="ico-comm i-search" title="搜索" id="btn_header_search">搜索</a>
        <input type="text" class="top-soso" id="inpt_header_search" placeholder="请输入想要找的宝贝" autocomplete="off" />
      </div>
    </header>
  </div>
  <!-- head-list -->
  <div class="wrap2">
    <div class="head">
      <ul class="menuList">
        <li><a href="../index.html">首页</a></li>
        <li><a href="./productlist.html" target="_blank">LOL主题站</a></li>
        <li><a href="./productlist.html" target="_blank">DNF主题站</a></li>
        <li><a href="./productlist.html" target="_blank">服饰时尚</a></li>
        <li><a href="./productlist.html" target="_blank">模型手办</a></li>
        <li><a href="./productlist.html" target="_blank">数码外设</a></li>
        <li><a href="./productlist.html" target="_blank">家居日用</a></li>
      </ul>
      <div id="all-class">
        <a href="./productlist.html" class="all-class" title="全部商品分类" target="_blank">
          <span>全部商品分类</span>
          <i class="i-arrbot"></i>
          <!-- 下拉菜单 -->
          <div class="top-submenu">
            <div class="mid clearfix">
              <ul class="submenu-ul" id="blk_header_submenu">
                <li class="submenu-li">
                  <a class="class-name" href="./productlist.html" target="_blank">
                    <img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/201810/20181009144950_33369.png"
                      alt="图标" width="30" />
                    <p>家居日用</p>
                  </a>
                  <ul class="class-list">
                    <li>
                      <a href="./productlist.html" target="_blank">背包</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">雨伞</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">水杯</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">卫衣</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">杯垫</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">T恤</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">福袋</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">围巾</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">卫裤</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">礼盒</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">袜子</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">发光亚克力夜灯</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">饰品</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">眼罩</a>
                    </li>
                  </ul>
                </li>
                <li class="submenu-li">
                  <a class="class-name" href="./productlist.html" target="_blank">
                    <img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/201810/20181009144942_72688.png"
                      alt="图标" width="30" />
                    <p>数码外设</p>
                  </a>
                  <ul class="class-list">
                    <li>
                      <a href="./productlist.html" target="_blank">移动电源</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">U盘</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">鼠标垫</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">数据线</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">游戏手机支架</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">无线充电器</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">键帽</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">个性定制手机壳</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">赏金令活动手机壳</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">手机支架</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">三折键盘</a>
                    </li>
                  </ul>
                </li>
                <li class="submenu-li">
                  <a class="class-name" href="./productlist.html" target="_blank">
                    <img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/201809/20180920115156_96185.png"
                      alt="图标" width="30" />
                    <p>服饰时尚</p>
                  </a>
                  <ul class="class-list">
                    <li>
                      <a href="./productlist.html" target="_blank">服饰时尚</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">帽子</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">潮流手绳</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">戒指</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">书签</a>
                    </li>
                  </ul>
                </li>
                <li class="submenu-li">
                  <a class="class-name" href="./productlist.html" target="_blank">
                    <img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/201810/20181009144933_93325.png"
                      alt="图标" width="30" />
                    <p>模型手办</p>
                  </a>
                  <ul class="class-list">
                    <li>
                      <a href="./productlist.html" target="_blank">公仔手办</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">刀锋+白狼+枪模</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">CF Girls</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">单款</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">徽章</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">枪模</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">电竞女子学院Q版手办</a>
                    </li>
                  </ul>
                </li>
                <li class="submenu-li">
                  <a class="class-name" href="./productlist.html" target="_blank">
                    <img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/201810/20181009144933_93325.png"
                      alt="图标" width="30" />
                    <p>毛绒</p>
                  </a>
                  <ul class="class-list">
                    <li>
                      <a href="./productlist.html" target="_blank">毛绒玩偶</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">毛绒挂件</a>
                    </li>
                    <li>
                      <a href="./productlist.html" target="_blank">毛绒</a>
                    </li>
                  </ul>
                </li>
                <li class="submenu-li">
                  <a class="class-name" href="./productlist.html" target="_blank">
                    <img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/201810/20181009144933_93325.png"
                      alt="图标" width="30" />
                    <p>礼盒类</p>
                  </a>
                  <ul class="class-list"></ul>
                </li>
              </ul>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>

  <!-- main -->


  <!-- 主要内容 -->
  <div class="order-bg">
    <div class=" order-cont mid">
      <strong>选择收货地址</strong>
      <div id="blk_pay_address">
        <div class="address-list">
          <ul class="clearfix">
            <!-- <li class="on" addressid="2781916">
              <span>封神</span>
              <p>河西走廊</p>
              <p class="fl mr30">18037098092</p>
              <a href="javascript:;" class="tx js_pay_address_edit"></a>
              <a href="javascript:;" class="gb js_pay_address_del"></a>
            </li> -->
            <li class="tj">
              <a id="btn_pay_address_add" href="javascript:;"><em></em><b>新增收货地址</b></a>
            </li>
          </ul>
          <!--<a href="javascript:;" title="显示全部地址" class="qb-dz">显示全部地址</a>-->
        </div>
      </div>
      <div id="blk_pre_mob">
      </div>

      <!-- 大区 -->
      <div id="blk_pay_zone"></div>

      <div class="order-goods">
        <div class="cart-supplier clearfix" id="blk_pay_goods"> <strong>确认商品信息</strong>
          <div class="order-details">
            <table>
              <colgroup>
                <col width="150">
                <col width="380">
                <col width="100">
                <col width="200">
                <col width="200">
                <col width="200">
              </colgroup>
              <thead>
                <tr>
                  <th colspan="3">商品信息</th>
                  <th>单价（元）</th>
                  <th>数量</th>
                  <th>金额（元）</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
            <div id="blk_sell_list">

            </div>
            <p>订单备注:<input id="remark" value="" onfocus="if (this.value=='选填：对本次交易的说明')this.value=''"></p>
          </div>
        </div>
      </div>



    </div>

    <div class="order-discount mid">
      <div id="blk_pay_coupon" class="voucher-1"> </div>
      <div id="blk_pay_judou" class="voucher-1"></div>

      <div class="purchase purchase1">
        <div id="blk_pay_total">
          <ul class="clearfix">
            <li>3件商品，商品总价</li>
            <li class="t1">1795.00 元</li>
            <li>VIP抵扣</li>
            <li class="t1">- 0.00 元</li>
            <li>优惠券</li>
            <li class="t1">- 0.00 元</li>
            <li>聚豆抵扣</li>
            <li class="t1">- 0.00 元</li>
            <li>运费：</li>
            <li class="t1">0.00 元</li>
            <li>实付款（含运费）</li>
            <li class="t1"><b>1795.00 元</b></li>
            <!-- <li class="t3">寄送至： 河西走廊 </li>
            <li class="t2">收货人：封神 18037098092</li> -->
          </ul>
          <div class="clearfix purchase-btn">
            <a href="javascript:;" title="提交订单" id="btn_pay_submit" class="dd-btn">提交订单</a>
            <a href="/cf/cart.shtml" title="返回购物车修改" class="xg-btn">返回购物车修改</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 收货地址弹出层 -->
  <div class="popup" id="popup_pay_address"
    style="width: 580px; visibility: visible; position: absolute; z-index: 99; left: 50%; top: 214.375px; margin-top: 0px; margin-left: -291px;"
    data-milodialog="1" role="dialog" tabindex="-1">
    <a class="popup-close" href="#" title="关闭"><i class="comicon i-close"></i></a>
    <div class="popup-main" id="blk_popup_pay_address">
      <h4>编辑收货地址( <span style="color:red;">*</span> 为必填项)</h4>
      <div class="popup-error" style="margin: 10px auto 0;text-align: center;color:red;"></div>
      <div class="popup-con" style="margin-top:10px;">
        <div class="popup-form">
          <form id="fm_pay_address">
            <div class="form-group clearfix">
              <label class="fl"><span style="color:red;">*</span>收件人</label>
              <input id="recName" class="fl wth400" value="" placeholder="收件人" name="name" verifyreg="^.{1,20}$"
                verifyerrmsg="收件人为必填项, 且最多20个字符">
            </div>
            <div class="form-group clearfix zd10">
              <label class="fl"><span style="color:red;">*</span>所在地区</label>
              <div id="blk_popup_pay_address_region">
                <div class="fl mrselect mr20 wth125" id="blk_popup_pay_address_region_1">
                  <span class="selected" title="" regionid="120000">全国</span>
                  <i class="comicon i-grayarrow"></i>
                </div>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="fl"><span style="color:red;">*</span>收件人地址</label>
              <input id="address" class="fl wth400" value="" placeholder="收件人地址" name="detail" verifyreg="^.{1,100}$"
                verifyerrmsg="收件人地址为必填项, 且最多100个字符">
            </div>
            <div class="form-group clearfix">
              <label class="fl"><span style="color:red;">*</span>手机号码</label>
              <input id="iphone" class="fl wth140" value="" placeholder="手机号码" name="mobile" verifyreg="^\d{11}$"
                verifyerrmsg="手机号码为必填项, 只能输入11位数字">
              <label class="fl ml20">固定电话</label>
              <input id="fixCall" class="fl wth140" value="" placeholder="固定电话" name="tel" verifyreg="^[\d\-]{0,12}$"
                verifyerrmsg="固定电话只能输入数字和-字符, 最多12位">
            </div>
            <div class="form-group clearfix">
              <label class="fl">邮政编码</label>
              <input id="postalCode" class="fl wth140" value="" placeholder="邮政编码" name="zip" verifyreg="^\B|\d{6}$"
                verifyerrmsg="邮编只能输入6位数字">
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="popup-con">
      <div class="popup-btnbox ml0 mb30">
        <a id="btn_pay_address_submit" href="javascript:;" class="popup-btn btn-sure">确认</a>
      </div>
    </div>
  </div>
  <!-- footer -->
  <div class="footer">
    <div class="mid clearfix">
      <div class="footer-logo fl">
        <a href="//cf.qq.com/" target="_bank" class="footer-djc" title="道聚城">
          <img src="../images/logo-cf-down.png" width="250" alt="道聚城" style="margin-left: -30px" />
        </a>
        <a href="https://szcert.ebs.org.cn/1efd63b4-7863-490a-839f-53968220109f" target="_bank" class="footer-business"
          title="道聚城">
          <img src="https://js01.daoju.qq.com/zb/mall/images/business.png" width="117" alt="工商网监" />
        </a>
      </div>
      <ul class="footer-info fl">
        <li>
          <a href="/help.shtml?gotab=1" target="_blank" muse_scanned="true"><span
              class="ic04 in comm-top"></span>购物指南</a>
        </li>
        <li>
          <a href="/help.shtml?gotab=2" target="_blank" muse_scanned="true"><span
              class="ic07 in comm-top"></span>配送方式</a>
        </li>
        <li>
          <a href="/help.shtml?gotab=3" target="_blank" muse_scanned="true"><span
              class="ic05 in comm-top"></span>常见操作</a>
        </li>
        <li>
          <a href="/help.shtml?gotab=4" target="_blank" muse_scanned="true"><span
              class="ic06 in comm-top"></span>售后服务</a>
        </li>
        <li>
          <a href="/help.shtml?gotab=5" target="_blank" muse_scanned="true"><span
              class="ic08 in comm-top"></span>关于我们</a>
        </li>
        <!--li><a href="javascript:;"><span class="ic09 in comm-top"></span>快递 100</a></li-->
      </ul>
      <ul class="footer-code fl">
        <li>
          <img src="../images/logo-cf-qr.png" width="100" height="100" alt="掌上穿越火线" />
          <p>掌上穿越火线</p>
        </li>
        <li>
          <img src="../images/jcp_gzh.jpg" width="100" height="100" alt="聚诚品公众号" />
          <p>聚诚品公众号</p>
        </li>
      </ul>
    </div>
  </div>
  <!-- bottoom -->
  <div id="footer_ied">
    <div class="wrap_ied">
      <p>
        <a href="//ieg.tencent.com" target="_blank">腾讯互动娱乐</a> |
        <a href="//game.qq.com/contract.shtml" target="_blank">服务条款</a> |
        <a href="//game.qq.com/privacy_guide.shtml" target="_blank">腾讯游戏隐私保护指引</a>
        |
        <a href="//game.qq.com/privacy_guide_children.shtml" target="_blank">腾讯游戏儿童隐私保护指引</a>
        | <a href="//e.tencent.com/" target="_blank">广告服务</a> |
        <a href="//game.qq.com/hr/" target="_blank">腾讯游戏招聘</a> |
        <a href="//kf.qq.com/" target="_blank">腾讯游戏客服</a> |
        <a href="//game.qq.com/gnav" target="_blank">游戏地图</a> |
        <a href="https://jiazhang.qq.com/jz/home.html?ADTAG=gamepcbottom" target="_blank">成长守护平台</a>
        |
        <a href="//game.qq.com/brand/business.htm" target="_blank">商务合作</a>
        | <a href="//www.qq.com/map/" target="_blank">网站导航</a>
      </p>
      <p>
        <a href="//www.qq.com/culture.shtml" target="_blank" rel="nofollow">粤网文[2014]0633-233号</a>&nbsp;增值电信业务经营许可证：<a
          href="//www.qq.com/icp.shtml" target="_blank" rel="nofollow">粤B2-20090059</a>&nbsp;<a
          href="//www.qq.com/icp1.shtml" target="_blank" rel="nofollow">B2-20090028</a>&nbsp;违法和不良信息举报电话：0755-83767606
      </p>
      <p class="e">COPYRIGHT © 1998 – 2020 TENCENT. ALL RIGHTS RESERVED.</p>
      <p>
        <a href="//www.tencent.com/law/mo_law.shtml?/law/copyright.htm" target="_blank">腾讯公司 版权所有</a>
      </p>
    </div>
  </div>
  <!-- underline -->
  <div class="copyright-business">
    <a target="_blank" href="" title="深圳市市场监督管理局企业主体身份公示">
      <img src="../images/gswj.png" width="15" height="15" alt="深圳市市场监督管理局企业主体身份公示" />工商网监电子标识
    </a>
  </div>

  <!-- 边栏 -->
  <div class="fixednav" id="blk_footer_tool">
    <a class="fixedlink myorder" title="我的订单" href="/myorder.shtml?busid=cf" target="_blank">
      <i class="comicon navico-order"></i>
      <span>我的<br />订单</span>
    </a>
    <a class="fixedlink myaddress" title="我的地址" href="/address.shtml" target="_blank">
      <i class="comicon navico-address"></i>
      <span>我的<br />地址</span>
    </a>
    <a class="fixedlink mycart" title="我的购物车" href="./cart.html" target="_blank">
      <i class="comicon navico-cart"></i>
      <span>购<br />物<br />车</span>
      <i class="comicon navico-cartnum">0</i>
    </a>
    <a id="onlineService1" class="fixedlink myservice" target="_blank" title="咨询">
      <i class="comicon navico-service"></i>
      <span>咨询</span>
    </a>
    <!-- <a id="onlineService2" class="fixedlink myservice" target="_blank" title="咨询" style="display:none">
          <i class="comicon navico-service"></i>
          <span>咨询</span>
      </a> -->
  </div>
  <!-- top返回顶部 -->
  <div class="topnav">
    <a href="#top"><i class="comicon btn-top"></i> <span>返回<br />顶部</span></a>
  </div>
  <script>
    let topnav = document.querySelector(".topnav");
    window.onscroll = function () {
      if (document.documentElement.scrollTop >= 400) {
        topnav.style.display = "block";
      } else {
        topnav.style.display = "none";
      }
    };
  </script>
  <script src="../js/order.js"></script>
  <script>
    citySelect();
    function citySelect() {
      //选择城市按钮
      let select = document.querySelector(".popup .popup-con .mrselect .i-grayarrow");
      if (localStorage.getItem("cityname")) {
        select.previousElementSibling.innerHTML = localStorage.getItem("cityname");
      }
      //渲染
      dealData();
      let bg = document.querySelector(".bg");
      select.onclick = () => {
        bg.style.display = "block";
      };
      //取消按钮
      let cancel = document.querySelector(".cancel");
      cancel.onclick = () => {
        bg.style.display = "none";
      };
      //确定按钮
      let sure = document.querySelector(".sure");
      sure.onclick = () => {
        select.previousElementSibling.innerHTML = localStorage.getItem("cityname");
        // console.log(select.previousElementSibling);
        bg.style.display = "none";
      };
    }

    //处理数据
    function dealData() {
      let cities = {};
      cities["#"] = [{ name: "全国" }];
      axios.defaults.headers.common["PlatformType"] = "h5";
      axios
        .get("https://api.tf2sc.cn/api/tfcar/city/treeList")
        .then(({ data }) => {
          let provinces = [...data.data];
          // console.log(provinces);
          let cityArr = [];
          provinces.forEach((item) => {
            cityArr.push(...item.children);
          });
          //排序
          cityArr.sort((a, b) => (a.initials > b.initials ? 1 : -1));
          //填充对象cities
          cityArr.forEach((item) => {
            if (cities[item.initials] == undefined) {
              cities[item.initials] = [item];
            } else {
              cities[item.initials].push(item);
            }
          });
          // console.log(cities);
          render(cities);
        });
    }
    //渲染列表
    function render(data) {
      let navul = document.querySelector(".nav ul");
      let cityul = document.querySelector(".city");
      let navStr = "";
      let cityStr = "";
      for (let key in data) {
        navStr += `<li>${key}</li>`;
        cityStr += `<section>
            <h4>${key}</h4>
            <ul>
              ${data[key].map((v) => `<li>${v.name}</li>`).join("")}
            </ul>
          </section>
        `;
      }
      navul.innerHTML += navStr;
      cityul.innerHTML += cityStr;
      //nav列表点击
      let sections = document.querySelectorAll(".city section");
      let navli = document.querySelectorAll(".nav li");
      navli.forEach((v, i) => {
        v.onclick = function () {
          navli.forEach((v) => {
            v.style.color = "black";
          });
          this.style.color = "rgb(49, 136, 195)";
          sections[i].scrollIntoView({
            behavior: "smooth",
          });
        };
      });
      //city列表点击
      let cityli = document.querySelectorAll(".city li");
      let cityname = "全国";
      cityli.forEach((v) => {
        v.onclick = function () {
          cityli.forEach((v) => {
            v.classList.remove("active");
          });
          this.classList.add("active");
          cityname = this.innerHTML;
          localStorage.setItem("cityname", cityname);
        };
      });
    }
  </script>

</body>

</html>